<template>
  <div>
    <div class="codeImg" @click="createVerificationCode">
      <img :src="VerificationCodeUrl" style="width: 100%; height: 100%" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    // 验证码确认
    var validateVerificationCode = (rule, value, callback) => {
      value = value.toLowerCase();
      if (value != this.VerificationCode) {
        callback(new Error("验证码输入错误！"));
      } else {
        callback();
      }
    };
    return {
      VerificationCode: "",
      VerificationCodeUrl: "", // 验证码图片链接

      rules: {
        code: [
          { required: true, message: "请输入验证码", trigger: "blur" },
          { validator: validateVerificationCode, trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    createVerificationCode() {
      this.$axios
        .get("https://www.zhiyanx.cn/api/checkcode/")
        .then((response) => {
            console.log(response.data);
          if (response.data.code == 200) {
            let verifyImageUrl = response.data.base64Image;
            this.VerificationCodeUrl = verifyImageUrl;
            
            let verifyCode = response.data.verifyCode;
            this.VerificationCode = verifyCode.toLowerCase();
            this.$store.commit('updateVerificationCode',verifyCode);
          } else {
            console.log('验证码请求失败')
          }
        });
    },
  },
  created: function () {
    this.createVerificationCode();
  },
};
</script>

<style>
</style>